<!DOCTYPE html>
<html>
<head>
    <title>计划维护记录详情</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <i-form ref="formValidate" :label-width="80" style="text-align: center">
        <Row>
            <i-col span="6">
                <Form-item label="计划名称">
                    <span>
                        {{moduleMaintainPlan.planName}}
                    </span>
                </Form-item>
            </i-col>
            <i-col span="6">
                <Form-item label="模具编码">
                    <span>
                        {{moduleMaintainPlan.moduleCode}}
                    </span>
                </Form-item>
            </i-col>

        </Row>
        <Row>
            <i-col span="6">
                <Form-item label="计划状态">
                    <span>
                        {{status}}
                    </span>
                </Form-item>
            </i-col>
            <i-col span="6">
                <Form-item label="执行时间">
                    <span>
                        {{transDate(moduleMaintainPlan.actionDate, "yyyy-MM-dd hh:mm:ss")}}
                    </span>
                </Form-item>
            </i-col>
        </Row>
        <!--<Row>
            <i-col span="12">
            </i-col>
            <i-col span="12">
                <i-button type="primary" @click="doSave">提交</i-button>
            </i-col>
        </Row>-->
    </i-form>
    <Card>
        <Tabs value="record0" type="card">
            <Tab-pane label="维护记录选项" name="record0">
                <table id="plan_record">
                    <tbody>
                    <tr>
                        <td>模具序号</td>
                        <td>一级名称</td>
                        <td>二级名称</td>
                        <td>方法手段</td>
                        <td>检查标准</td>
                        <td>准备前情况</td>
                        <td>准备后情况</td>
                        <td>备注信息</td>
                    </tr>
                    </tbody>
                </table>
            </Tab-pane>
        </Tabs>
    </Card>
</div>

</body>
<script>

    var vm = new Vue({
        el: '#rrapp',
        data: {
            moduleMaintainPlan: {},
            status: ''
        },
        method: {}
    });
    $(function () {
        var planId = getQueryString("planID");
        getInfo(planId);
        //查询计划数据
        loadData(planId);
    });

    function loadData(planId) {
        Ajax.request({
            url: '../modulemaintainrelate/queryAll',
            async: false,
            params: {'planID': planId},
            type: "POST",
            successCallback: function (r) {
                console.info(r.list);
                var recordList = r.list;
                initTable(recordList);
            }

        });
    }


    var getRecordList = function () {
        var recordList = new Array()
        for (j = 0, len = length; j < len; j++) {
            var record_id = "#record_id_" + j;
            var whf_id = "#record_whf_" + j;
            var whl_id = "#record_whl_" + j;
            var ohtml = "#record_orNum_" + j;
            var optionRemarkHtml = "#optionRemark_" + j;

            var id = $(record_id).val();
            var whf = $(whf_id).val();
            var whl = $(whl_id).val();
            var orNum = $(ohtml).val();
            var optionRemark = $(optionRemarkHtml).val();
            var record = {
                id: id,
                whf: whf,
                whl: whl,
                orNum: orNum,
                optionRemark:optionRemark
            };
            recordList[j] = record;
        }

        return recordList;
    }

    /*function doSave() {
        var recordList=new Array()
        for(j = 0,len=length; j < len; j++) {
            var record_id = "#record_id_"+j;
            var whf_id = "#record_whf_"+j;
            var whl_id = "#record_whl_"+j;
            var ohtml = "#record_orNum_"+j;

            var id = $(record_id).val();
            var whf = $(whf_id).val();
            var whl = $(whl_id).val();
            var orNum = $(ohtml).val();
            var record={
                id:id,
                whf:whf,
                whl:whl,
                orNum:orNum
            };
            recordList[j]=record;
        }
        Ajax.request({
            url: '../modulemaintainrecord/updateRecord',
            async: false,
            params: JSON.stringify(recordList),
            type: "POST",
            contentType: "application/json",
            successCallback: function (r) {
                var result = r.result;
                if(result==0){
                    alert("数据填写成功！");
                }
            }

        });

        console.log(list);
        console.log();

    }*/

    var length = 0;

    /**
     * 初始化表格
     * @param recordList
     */
    function initTable(recordList) {

        var html = "<tbody><tr><td>模具序号</td><td>一级名称</td><td>二级名称</td><td>方法手段</td><td>检查标准</td><td>准备前情况</td><td>准备后情况</td><td>备注信息</td></tr>"
        length = recordList.length;
        for (j = 0, len = recordList.length; j < len; j++) {
            var obj = recordList[j];
            var record_id = "record_id_" + j;
            var rhtml = "<input type='hidden' id=\"" + record_id + "\" value=\"" + obj.id + "\"/>"
            var record_or = "record_orNum_" + j;
            var ohtml = "<input type='hidden' id=\"" + record_or + "\" value=\"" + obj.orNum + "\"/>"
            var whf_id = "record_whf_" + j;
            var slect_whf = "<select id=\"" + whf_id + "\"><option value=\"0\">不合格</option><option value=\"1\" selected='selected'>已合格</option></select>";
            var whl_id = "record_whl_" + j;
            var slect_whl = "<select id=\"" + whl_id + "\"><option value=\"0\">不合格</option><option value=\"1\" selected='selected'>已合格</option></select>";
            var optionRemark_id = "optionRemark_"+j;
            var optionRemarkHtml = "<input type=\"text\" id=\""+optionRemark_id+"\"/>";
            html += "<tr>";
            html += "<td>" + rhtml + ohtml + obj.moduleMaintainOption.orNum + "</td>>";
            html += "<td>" + obj.moduleMaintainOption.optionSubclass + "</td>";
            html += "<td>" + obj.moduleMaintainOption.optionName + "</td>";
            html += "<td>" + obj.moduleMaintainOption.method + "</td>";
            html += "<td>" + obj.moduleMaintainOption.inspectStandard + "</td>";
            html += "<td>" + slect_whf + "</td>";
            html += "<td>" + slect_whl + "</td>";
            html += "<td>" + optionRemarkHtml + "</td>";
            html += "</tr>";
        }
        html += "</tbody>";
        $("#plan_record").empty();
        $("#plan_record").html(html);
    }

    function getInfo(planId) {
        Ajax.request({
            url: "../modulemaintainplan/info/" + planId,
            async: true,
            successCallback: function (r) {
                vm.moduleMaintainPlan = r.moduleMaintainPlan;
                var s = vm.moduleMaintainPlan.reviewStatus;
                vm.status = sysEnums.REVIEW_STATUS[s];
            }
        });
    }

</script>
<style>
    #plan_record {
        border: 1px solid #e9eaec;
        text-align: center;
    }

    #plan_record tr {
        border: 1px solid #e9eaec;
        padding: 5px !important;
    }

    #plan_record td {
        padding: 5px !important;
        border-left: 1px solid #e9eaec;
    } #plan_record select {
          width: 70%;
        border-color: #e9eaec;
        padding: 5px;
      }
</style>
</html>
